{include file="public/header" /}
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>添加章节</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal" name="userAdd" id="userAdd" >
                        <div class="form-group">
                            <label class="col-sm-3 control-label">章节名称：</label>
                            <div class="input-group col-sm-4">
                                <input id="catalogue_title" type="text" class="form-control" name="catalogue_title">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">缩略图：</label>
                            <div class="input-group col-sm-5">
                                <input type="hidden" id="data_photo" name="images" >
                                <div id="imgPicker" style="float:left">选择图片</div>
                                <img id="img_data" height="100px" style="float:left;margin-left: 50px;margin-top: -10px;cursor:pointer;" src="/static/admin/images/no_img.jpg" onclick='imgDisplay(this)'/>
                                <div id="fileList" class="uploader-list" style="float:right"></div>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label yanse">章节视频：</label>
                            <div class="input-group col-sm-7">
                                <div class="page-container">
                                    <input type="hidden" name="photo" id="photo" value="">
                                    <div id="uploader" class="wu-example">
                                        <div class="queueList">
                                            <div id="dndArea" class="placeholder">
                                                <div id="filePicker"></div>
                                                <p>支持AVI、MKV、RM、FLV、MP4</p >
                                            </div>
                                        </div>
                                        <div class="statusBar" style="display:none;">
                                            <div class="progress progress-striped active">
                                                <div class="progress-bar progress-bar-success">
                                                    <span>0%</span>
                                                </div>
                                            </div>
                                            <div class="info"></div>
                                            <div class="btns">
                                                <div id="filePicker2"></div>
                                                <div class="uploadBtn">开始上传</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--<span class="help-block m-b-none photos" ><i class="fa fa-info-circle"></i> 必填</span>-->
                                <a id="myPhoto"  class="photos" style="color:#A94543"></a>
                            </div>
                        </div>


                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-3">
                                <button class="btn btn-primary btsave" type="submit"><i class="fa fa-save"></i> 保存</button>&nbsp;&nbsp;&nbsp;
                                <a class="btn btn-danger" href="javascript:history.go(-1);"><i class="fa fa-close"></i> 返回</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
{include file="public/footer" /}

<script type="text/javascript" src="__JS__/Crop.js"></script>
<script type="text/javascript" src="__JS__/webupload/webuploader_upload_video.js"></script>
<script type="text/javascript">
    wk.upload("{:url('Upload/upload')}",2);

    //百度富文本编辑器
//    var editor = UE.getEditor('myEditor', {
//        initialFrameHeight:450,
//        autoHeight: false,
//        autoHeightEnabled:false,
//        autoFloatEnabled:false
//    });

    $.validator.setDefaults({
        highlight: function(e) {
            $(e).closest(".form-group").removeClass("has-success").addClass("has-error")
            $(e).closest(".form-control").css("color","#737373");
        },
        success: function(e) {
            // e.closest(".form-group").removeClass("has-error").addClass("has-success")
            $(e).closest(".form-group").removeClass("has-error");
        },
        errorElement: "span",
        errorPlacement: function(e, r) {
            e.appendTo(r.is(":radio") || r.is(":checkbox") ? r.parent().parent().parent() : r.parent())
            if(r.is("#groupid")){
                e.appendTo(r.parent());
            }
        },
        errorClass: "help-block m-b-none",
        validClass: "help-block m-b-none"
    }), $().ready(function() {
        var e = "<i class='fa fa-times-circle'></i> ";
        $("#userAdd").validate({
            rules: {
                catalogue_title: {
                    required: !0,
                }
            },
            messages: {
                catalogue_title: {
                    required: e + "请输入章节名称",
                }
            },
            submitHandler: function(form) {
                $('button').attr('disabled', 'disabled');
                $.ajax({
                    url: "{:url('catalogueAdd')}",
                    type: "post",
                    dataType: "json",
                    data: $("#userAdd").serialize(),
                    success: function (data) {
                        if (data.code == 200) {
                            wk.success(data.msg,1,"{:url('Classroom/classroomcatalogue')}");
                        } else {
                            $('button').removeAttr('disabled');
                            wk.error(data.msg,2,'');
                            return false;
                        }
                    }
                });
            },
        })
    });


    //裁剪后的处理
    $("#sureCut").on("click",function () {
        if ($("#tailoringImg").attr("src") == null ){
            return false;
        }else{
            var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
            var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
            $("#img_data").attr('src',base64url).show();
            $('#data_photo').val(base64url);
            //关闭裁剪框
            $("#myModal").modal('hide');
        }
    });


</script>
</body>
</html>